<template>
	<!-- 记录 -→ 告警事件记录 -->
	<view class="container">
		<!-- <navbar-back :fixed="false" back title="告警事件记录" font-color="#666"></navbar-back> -->
		<ren-dropdown-filter openDate :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected' @dateChange='dateChange'></ren-dropdown-filter>
		<view class="record-list">
			<view class="record-title">
				<text class="font36">记录列表</text>
				<view class="record-total">
					<view class="total">
						<text>总数</text>
						<text>3</text>
					</view>
					<view class="unconfirmed" style="color: #FF7547;">
						<text>未确认</text>
						<text>1</text>
					</view>
					<view class="confirmed" style="color: #1DD3B8;">
						<text>已确认</text>
						<text>2</text>
					</view>
				</view>
			</view>
			<view class="record-item">
				<mark-slide-list :list="warningList" @click="clickMethod" @change="changeMethod"></mark-slide-list>
			</view>
		</view>
	</view>
</template>

<script>
	// import navbarBack from '../../components/navbar-back/navbar-back.vue'
	import renDropdown from '../../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import markSlideList from '../../components/mark-slide-list/mark-slide-list.vue'
	export default {
		components: {
			renDropdown,
			markSlideList
		},
		data() {
			return {
				filterData: [
					[{
						text: '配电房1',
						value: ''
					}, {
						text: '配电房1',
						value: 1
					}, {
						text: '配电房2',
						value: 2
					}, {
						text: '配电房3',
						value: 3
					}],
					[{
						text: '温度1',
						value: ''
					}, {
						text: '温度1',
						value: 1
					}, {
						text: '温度2',
						value: 2
					}, {
						text: '温度3',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				warningList: [{
						id: 1,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 0
					},
					{
						id: 2,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 1
					}
				],
			}
		},
		methods: {
			onSelected(res) {
				console.log(res)
			},
			dateChange(d) {
				uni.showToast({
					icon: 'none',
					title: d
				})
			},
			changeMethod(data, index) {
				// console.log('滑动按钮回调', data)
				// console.log('滑动按钮回调', button)
				let self = this
				console.log('点击删除')
				// if (button.title === '删除') {
				uni.showModal({
					title: '',
					content: '确定要删除该信息吗？',
					confirmText: '删除',
					confirmColor: '#ff3b32',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							self.warningList.splice(index, 1)
							uni.showToast({
								icon: "success",
								title: '操作成功!',
								duration: 2000
							});
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
				// }
			},
			/**
			 * 点击按钮触发事件
			 * @param {Object} item 列表数据 
			 */
			clickMethod(data) {
				console.log('点击行回调', data)
			}
		},
	}
</script>

<style lang="scss">
	page {
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		ren-dropdown-filter {
			height: 70rpx;
		}
		.record-list {
			margin: 0 24rpx;
			margin-top: 40rpx;
			padding: 0 24rpx 9rpx 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.record-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 92rpx;
				line-height: 92rpx;
				.font36 {
					font-size: 36rpx;
				}
			}
			.record-total {
				display: flex;
				flex-direction: row;
				font-size: 28rpx;
				.unconfirmed {
					padding: 0 24rpx;
				}
				
			}
		}
		
	}
	
</style>
